·
<script setup>
import { ref, reactive, watch } from "vue"
const props = defineProps(['visiable', 'choose'])
const emit = defineEmits(['close', 'sendOut'])
const acWrap = ref()
const isShow = ref(false)

const businessOptions = ref([
  {
    id: 1,
    businessName: '果塘湖农贸市场',
    cargoNum: 3,
    saled: '500',
    saledMoney: '4000',
    loginName: "15823101358",
    taken: "2000",
    state: "0",
    address: "重庆市渝北区果塘路9号", // 地址
    bank: '重庆农商行', // 开户银行
    bankAccount: '8757757878789', //银行账户
    bankAccountName: "姚志农", // 银行户名
    descript: "", //描述
  },
  {
    id: 2,
    businessName: '渝佰滋味',
    cargoNum: 3,
    saled: '500',
    saledMoney: '4000',
    loginName: "89132911",
    taken: "2000",
    state: "1",
    address: "重庆市江北区石马河街道玉带山200号", // 地址
    bank: '农业银行', // 开户银行
    bankAccount: '453545467675777575', //银行账户
    bankAccountName: "沈渝", // 银行户名
    descript: "", //描述
  },
  {
    id: 3,
    businessName: '鲜丰水果',
    cargoNum: 3,
    saled: '500',
    saledMoney: '4000',
    loginName: "19936307460",
    taken: "2000",
    state: "0",
    address: "重庆市沙坪坝区虎溪街道大学城西路29号附16号", // 地址
    bank: '工商银行', // 开户银行
    bankAccount: '3039820928920920', //银行账户
    bankAccountName: "张鲜丰", // 银行户名
    descript: "", //描述
  }
])
const tableData = ref([
  {
    id: 1,
    orderId: "1231",
    businessName: "鲜丰水果",
    consignor: "13032378562",
    consignorAddress: "重庆市九龙坡区冶金路2号",
    createDate: '2024-08-06 19:02:56',
    tradePrice: '4000',
    expressList: [
    ],
    tradeYuan: '200',
    isFeedBack: '0',
    feedBackMessage: '',
    state: '0',
    feeState: '0'
  },
  {
    id: 2,
    orderId: "1232",
    businessName: "鲜丰水果",
    consignor: "13368169072",
    consignorAddress: "重庆市渝北区湖红路恒大世纪城",
    createDate: '2024-08-06 19:02:56',
    tradePrice: '4000',
    expressList: [
    ],
    tradeYuan: '200',
    isFeedBack: '0',
    feedBackMessage: '',
    state: '1',
    feeState: '0'
  },
  {
    id: 3,
    orderId: "1233",
    businessName: "渝佰滋味",
    consignor: "15802340766",
    consignorAddress: "重庆市两江新区太湖中路53号附71号",
    createDate: '2024-08-06 19:02:56',
    tradePrice: '4000',
    expressList: [
      {
        company: '申通快递',
        no: '776001682890196'
      }
    ],
    tradeYuan: '200',
    isFeedBack: '0',
    feedBackMessage: '',
    state: '2',
    feeState: '0'
  },
  {
    id: 4,
    orderId: "1234",
    businessName: "渝佰滋味",
    consignor: "18203089779",
    consignorAddress: "重庆市巴南区燕尾山路898号",
    createDate: '2024-08-06 19:02:56',
    tradePrice: '4000',
    expressList: [
      {
        company: '韵达',
        no: '312098513062030'
      }
    ],
    tradeYuan: '200',
    isFeedBack: '2',
    feedBackMessage: '测试问题',
    state: '3',
    feeState: '0'
  },
  {
    id: 5,
    orderId: "1235",
    businessName: "渝佰滋味",
    consignor: "18225162013",
    consignorAddress: "重庆市九龙坡区科园四路170号",
    createDate: '2024-08-06 19:02:56',
    tradePrice: '4000',
    expressList: [
      {
        company: '圆通',
        no: 'YT5270796465522'
      }
    ],
    tradeYuan: '200',
    isFeedBack: '0',
    feedBackMessage: '',
    state: '3',
    feeState: '1'
  },
  {
    id: 6,
    orderId: "1236",
    businessName: "果塘湖农贸市场",
    consignor: "13541224047",
    consignorAddress: "重庆市九龙坡区科园四路100号",
    createDate: '2024-08-06 19:02:56',
    tradePrice: '4000',
    expressList: [
      {
        company: '顺丰',
        no: 'SF254227178797'
      }
    ],
    tradeYuan: '200',
    isFeedBack: '1',
    feedBackMessage: '收到货的时候，发现货里面只有箱子，没看到货品，就好像收到货了但没有收到货',
    state: '3',
    feeState: '2'
  },
  {
    id: 7,
    orderId: "1237",
    businessName: "果塘湖农贸市场",
    consignor: "18916970204",
    consignorAddress: "重庆市渝北区翠苹路海德盛世-A区",
    createDate: '2024-08-06 19:02:56',
    tradePrice: '4000',
    tradeYuan: '200',
    expressList: [
      {
        company: '顺丰',
        no: 'SF1623589400417'
      },
      {
        company: '京东',
        no: 'JD0154007531494'
      }
    ],
    isFeedBack: '0',
    feedBackMessage: '',
    state: '2',
    feeState: '0'
  }
])
const params = reactive({
  businessName: '',
  start: '',
  end: ''
})
const dateValue = ref([])
const close = () => {
  emit('close')
}
watch(() => props.visiable, (val) => {
  isShow.value = val
})
</script>

<template>
  <el-dialog v-model="isShow" title="申请结算" width="1200" @close="close">
    <div class="ac-wrap" ref="acWrap">
      <div class="static">
        <el-descriptions column="6" border>
          <el-descriptions-item align="center" label="可结算额">268500</el-descriptions-item>
          <el-descriptions-item align="center" label="总结算金额">268500</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="static">
        <el-select v-model="params.business" placeholder="请选择商家" style="width: 180px;margin-right: 10px">
          <el-option v-for="item in businessOptions" :key="item.id" :label="item.businessName" :value="item.businessName" />
        </el-select>

        <el-date-picker style="margin-right: 10px;" v-model="dateValue" type="daterange" range-separator="至"
          start-placeholder="开始时间" end-placeholder="结束时间" />

        <el-button type="primary">查询</el-button>
        <el-button type="primary">申请结算</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column label="订单号" property="id" width="120">
        </el-table-column>
        <el-table-column property="businessName" label="商家名称" width="180" />
        <el-table-column property="consignor" label="买家" width="240" />
        <el-table-column property="createDate" label="创建时间" />
        <el-table-column property="tradePrice" label="交易金额" />
        <el-table-column property="tradeYuan" label="结算金额(人名币)" />
      </el-table>
    </div>
  </el-dialog>
</template>

<style scoped>
.ac-wrap {
  width: calc(100% - 40px);
  height: calc(100% - 40px - 15vh);
  position: relative;
  background-color: #fff;
  overflow: auto;
  padding: 0 20px;
}

.static {
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
}
</style>